<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>商品列表</title>
	<link rel="stylesheet" href="http://shop.com:5500/resources/css/back.css" />
	<script src="http://shop.com:5500/resources/js/jquery-1.11.3.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://shop.com:5500/resources/js/jquery-heima-0.0.1.js"></script>
	<style type="text/css">
		.cate_tr {
			text-align: center;
		}

		.cate_tr:hover {
			background-color: white;
		}
	</style>
	<script>
		// 删除分类方法
		function delCategory(obj){
			if(confirm("你确认删除该分类吗？")){
				var cid = $(obj).data("cid");
				// alert(cid);
				$.ajax({
					url: "http://api.shop.com:8080/category?md=delete&cid="+cid,
					type: "post",
					success: function (response) {
						// alert(response);
						location.href="list.html";
					}
				})	
				
			}
		}
		$(function () {
			$.ajax({
				url: "http://api.shop.com:8080/category?md=findAll",
				type: "post",
				success: function (response) {
					// alert(response);
					//拿到数据
					// 字符串转对象
					var category = eval("(" + response + ")");
					if (category.code == 1) {
						var lists = category.data;
						// console.log(lists);
						// alert(list);
						// //处理显示位置 清空元素
						var html = "";
						// 遍历数组
						for (cate of lists) {
							var cname = cate.cname;
							var cid = cate.cid;
							//拼接标签
							//<li><a href="#">电脑办公</a></li>
							html += "<tr class=\"cate_tr tr_odd\" >\n" +
								"\t\t\t\t\t\t\t\t<td>\n" +
								"\t\t\t\t\t\t\t\t\t" + cid + "\n" +
								"\t\t\t\t\t\t\t\t</td>\n" +
								"\t\t\t\t\t\t\t\t<td>\n" +
								"\t\t\t\t\t\t\t\t\t" + cname + "\n" +
								"\t\t\t\t\t\t\t\t</td>\n" +
								"\t\t\t\t\t\t\t\t<td >\n" +
								"\t\t\t\t\t\t\t\t\t<a href=\"http://shop.com:5500/view/admin/category/edit.html?cid=" + cid + "\" class=\"a_button_edit\"></a>\n" +
								"\t\t\t\t\t\t\t\t\t&nbsp;&nbsp;\n" +
								"\t\t\t\t\t\t\t\t\t<a href=\"javascript:;\" data-cid='"+cid+"' onclick=\"delCategory(this);\" class=\"a_button_del\"></a>\n" +
								"\t\t\t\t\t\t\t\t</td>\n" +
								"\t\t\t\t\t\t\t</tr>";
						}
						// 追加字符串
						$("#list").html(html);
					}
				}
			})
		})
	</script>
</head>

<body>
	<table cellSpacing="1" cellPadding="0" width="100%" align="center" bgColor="#f5fafe" border="0">
		<tbody>
			<tr>
				<td align="center" bgColor="#afd1f3">
					<strong>分类列表</strong>
				</td>
			</tr>
			<tr>
				<td align="right">
					<a href="add.html" target="mainFrame">添加</a>
				</td>
			</tr>
			<tr>
				<td>
					<table id="list" cellspacing="0" bordercolor="gray" border="1"
						style="width:100%;BORDER-COLLAPSE:collapse;">
						<tr
							style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #afd1f3;text-align: center;">
							<td width="18%">
								序号
							</td>
							<td width="47%">
								分类名称
							</td>
							<td width="7%">
								操作
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</tbody>
	</table>

</body>

</html>